/* * @Author: wangsh  * @Date: 2019-05-11 19:45:57  */
.card-wrapp {
  margin-top: 10px;
}
/* 正方形 */
.square {
  width: 100px;
  height: 100px;
  background: #23b7e5;
}
/* 长方形 */
.rectangle {
  width: 200px;
  height: 100px;
  background: #23b7e5;
}
/* 圆形 */
.roundness {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #23b7e5;
}
/* 椭圆形 */
.oval {
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background: #23b7e5;
}
/* 上三角 */
.downTriangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #23b7e5;
}
/* 下三角 */
.upTriangle {
  width: 0;
  height: 0;
  border-top: 100px solid #23b7e5;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
/* 左三角 */
.leftTriangle {
  width: 0;
  height: 0;
  border-top: 100px solid #23b7e5;
  border-right: 100px solid transparent;
}
/* 右三角 */
.rightTriangle {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-bottom: 100px solid #23b7e5;
}
/* 太极 */
.taiji {
  width: 96px;
  box-sizing: content-box;
  height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    box-sizing: content-box;
  }
  &:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    box-sizing: content-box;
  } 
}
.startSix {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #23b7e5;
  position: relative;
  &:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #23b7e5;
    top: 25px;
    left: -50px;
  }
}
/* 心形 */
.heart{
  position: relative;
  width: 100px;
  height: 100px;
  animation: sunScale .5s linear infinite;
  &:before, &:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  &:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }
}
/* 鸡蛋 */
.egg {
  display: block;
  width: 80px;
  height: 100px;
  background-color: #f5cd3dad;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

/* 天气 */
.weather {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 200px;
  background: #23b7e5;
  border-radius: 8px;
}

/* 晴天 */
.sunny {
  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: #F6D963;
    border-radius: 50%;
    box-shadow: 0 0 20px #ff0;
    z-index: 2;
  }

  &:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -45px 0 0 -45px; 
    width: 90px;
    height: 90px;
    background: #FFEB3B;
    clip-path: polygon(
      50% 0%,
        65.43% 25%,
        93.3% 25%,
        78.87% 50%,
        93.3% 75%,
        64.43% 75%,
        50% 100%,
        35.57% 75%,
        6.7% 75%,
        21.13% 50%,
        6.7% 25%,
        35.57% 25%);
    z-index: 1;
    animation: sunScale 2s linear infinite;
  }
}

@keyframes sunScale {
  0% {
      transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}

.cloudy:before,
.rainy:before,
.snowy:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 
    	#fff 22px -15px 0 6px,
    	#fff 57px -6px 0 2px, 
    	#fff 87px 4px 0 -4px,
    	#fff 33px 6px 0 6px,
    	#fff 61px 6px 0 2px,
    	#ccc 29px -23px 0 6px,
    	#ccc 64px -14px 0 2px,
    	#ccc 94px -4px 0 -4px;
}

.cloudy:before {
  animation: cloudMove 2s linear infinite;
}

.rainy:after {
  content: '';
  position: absolute;
  top:50%;
  left: 25%;
  width: 4px;
  height: 14px;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    #fff 25px -10px 0,
    #fff 50px 0 0,
    #fff 75px -10px 0,
    #fff 0 25px 0,
    #fff 25px 15px 0,
    #fff 50px 25px 0,
    #fff 75px 15px 0,
    #fff 0 50px 0,
    #fff 25px 40px 0,
    #fff 50px 50px 0,
    #fff 75px 40px 0;
  animation: rainDrop 2s linear infinite; 
}

@keyframes cloudMove {
  0% {
      transform: translate(-50%, -50%);
  }
  50% {
      transform: translate(-50%, -60%);
  }
  100% {
      transform: translate(-50%, -50%);
  }
}

@keyframes rainDrop {
  0% {
      transform: translate(0, 0) rotate(10deg);
  }
  100% {
      transform: translate(-4px, 24px) rotate(10deg);
      box-shadow:
      #fff 25px -10px 0,
      #fff 50px 0 0,
      #fff 75px -10px 0,
      #fff 0 25px 0,
      #fff 25px 15px 0,
      #fff 50px 25px 0,
      #fff 75px 15px 0,
      rgba(255, 255, 255, 0) 0 50px 0,
      rgba(255, 255, 255, 0) 25px 40px 0,
      rgba(255, 255, 255, 0) 50px 50px 0,
      rgba(255, 255, 255, 0) 75px 40px 0;
  }
}
  
.snowy:after {
  content: "";
  position: absolute;
  top:50%;
  left: 25%;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
      #fff 25px -10px 0,
      #fff 50px 0 0,
      #fff 75px -10px 0,
      #fff 0 25px 0,
      #fff 25px 15px 0,
      #fff 50px 25px 0,
      #fff 75px 15px 0,
      #fff 0 50px 0,
      #fff 25px 40px 0,
      #fff 50px 50px 0,
      #fff 75px 40px 0;
  animation: snowDrop 2s linear infinite; 
}
@keyframes snowDrop {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(25px);
      box-shadow:
      #fff 25px -10px 0,
      #fff 50px 0 0,
      #fff 75px -10px 0,
      #fff 0 25px 0,
      #fff 25px 15px 0,
      #fff 50px 25px 0,
      #fff 75px 15px 0,
      rgba(255, 255, 255, 0) 0 50px 0,
      rgba(255, 255, 255, 0) 25px 40px 0,
      rgba(255, 255, 255, 0) 50px 50px 0,
      rgba(255, 255, 255, 0) 75px 40px 0;
  }
}